<template>
  <div class="f_brandOperationTwo" v-if="apiData">
    <TopHeader :show-right="true" :show-left="true" :nobg="true">
      <template v-slot:left>
        <img src="static/image/public/i_back_white.png" alt="back_arrow" class="back-arrow">
      </template>
      <template v-slot:title>
        <span>麻将今日运势</span>
      </template>
      <!-- <template v-slot:right>
         <span class="share-icon" @click="sharePop()"></span>
      </template> -->
    </TopHeader>
     <section class="main">
        <img src="static/image/brandOperationOne/resultTop.png" alt="麻将今日运势" class="top_image">
        <p class="title_box1">{{apiData.chengyu1}}</p>
        <p  class="title_box2">{{apiData.chengyu2}}</p>
        <div class="avatar">
          <img
            class="user_imgs"
            :src="avatar"
            alt="头像"
            srcset
          />
          <img src="static/image/brandOperationOne/l_modify.png" alt="修改" class="modify_image" @click="editInfo">
        </div>
        
        <div class="user_name">
          {{name}}
          <span v-if="user_sex == 1" class="user_sex_b"></span>
          <span v-else class="user_sex_g"></span>
        </div>
        <div class="message">
          <div class="date">
            {{date}}
          </div>
          <div class="user_star">
            <p>今日麻将运势</p>
            <div v-for="(item,index) in score" :key="index">
              <span class="star_s"></span>
            </div>
            <div v-for="(item,idx) in emptyStar" :key="'gray'+idx">
              <span class="star_k"></span>
            </div>
          </div>
          <p>{{apiData.duanyu}}</p>
        </div>
        <div class="content">
          <div class="content_images">
            搓麻小贴士
          </div>
          <div>
            <p class="title">开运服饰</p>
            <p class="box">{{apiData.kyfs}}</p>
          </div>
          <div>
            <p class="title">开运方位</p>
            <p class="box">{{apiData.kyfw}}</p>
          </div>
          <div>
            <p class="title">致胜战术</p>
            <p class="box">{{apiData.zszs}}</p>
          </div>
          <div>
            <p class="title">应避对象</p>
            <p class="box">{{apiData.ybdx}}</p>
          </div>
        </div>
        <p class="hint">温馨提示：测算结果仅供参考，小赌怡情，大赌伤身！</p>
        <div class="btn_box">
          <p class="btn_share" @click="sharePop">分享好友</p>
          <p class="btn_resolve" @click="toMaster">专业解答</p>
        </div> 
     </section>
     
    <share :ShareParams="ShareParams" :showShareStatus="showShareStatus" @changeStatus='showShareStatus=$event'></share>
    <!-- 广告 -->
    <theAdvertis :adProp='adProp'></theAdvertis>
  </div>
</template>

<script>
import TopHeader from "@/components/topHeader";
import tool from '@/assets/js/tool'
import { setTimeout } from 'timers';
import share from '@/components/sharePopup';
import theAdvertis from '@/components/the-advertis';
export default {
  name: "brandOperationTwo",
  data() {
    return {
      user_sex: window.localStorage.getItem("JMYC_USERGENDER"),
      score: [],
      emptyStar: [],
      apiData:undefined,
      birthday:undefined,
      avatar: tool.getAvatar(window.localStorage.getItem("JMYC_USERGENDER")),
      name: undefined,
      date: new Date().format("yyyy年MM月dd日"),
      ShareParams:{
        'shareLink': 'https://cs.52dd.cn/jrpy/index.html',
        'shareTitle': '麻将今日运势',
        'shareContent': '预测今日财运，揭秘好运技巧',
        'shareThumbs': ['static/image/public/defaultHeader.png']
      },
      showShareStatus:false,
      adProp:{
        gid:6,
        type:1,
        position:4
      }
    };
  },
  components: {
    TopHeader,
    share,
    theAdvertis
  },
   // 设置跳转问大师页面不缓存
  beforeRouteLeave (to, from, next) {
    if(to.name == 'h_askTeacher'){
      to.meta.keepAlive = false
      next()
    }else{
      next()
    }
  },
  created() {
    this.$store.commit('changePageLoading',true);
    this.getDetail()
  },
  methods: {
    getDetail() {
       this.$fetch.post("/app/Jmmfcs/todaymj",{
          sex: window.localStorage.getItem("JMYC_USERGENDER") == 1?1:0,
          name: window.localStorage.getItem("JMYC_USERNAME"),
          birthday: window.localStorage.getItem("JMYC_BIRTHDATE"),
          nopoint: window.localStorage.getItem("JMYC_NOPOINT")
        }).then(res=>{
          if(res.code = 1){
            this.apiData = res.data,
            this.score.length = res.data.fenshu
            this.emptyStar.length = 5-res.data.fenshu
            this.birthday = res.data.birthday
            this.$store.commit('changePageLoading',false)
            this.name = res.data.name
          }
        })
    },
    toMaster() {
        this.$router.push('/askTeacher?isMiddlePage=1')
    },
    editInfo() {
      this.$router.replace('/brandOperationOne')  
    },
    sharePop(){
      this.showShareStatus=!this.showShareStatus;
    },
  }
};
</script>

<style lang="less">
@import "../../assets/css/public.less";
@import "../../assets/css/tml_base.less";
@import "./index.less";
</style>